<template>
    <div class="dhzn_rolestat">
        <!-- 角色信息的统计 -->
        <div class="dhzn_r-title">
            <!-- 统计数据 -->
            <div class="dhzn_r-t-data">
                <transition-group appear tag="div">
                    <span v-for="item in roledata" :key="item.id" v-show="item.number!==''" class="dhzn_rtd-num bcwh wh tc dib f16 br5">{{item.name}}: {{item.number}}</span>
                </transition-group>
            </div>
            <!-- 搜索 -->
            <!-- <div id="chart1"></div> -->
            <!-- <v-chart :options="barOptions" autoresize theme="light"></v-chart> -->
            <!-- <div class="view-content">
                <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
            </div> -->
            <echartsdom :id="'bargraph'" :data="option2" style="height:350px" />
        </div>
    </div>
</template>

<script>
import echartsdom from "../../views/echartsmod.vue"
let axios = require('axios')
export default {
    components: {
        echartsdom
    },
    // name: 'HelloWorld',
    
    data() {
        return {
            roledata:[
                {id:0,name:'合伙人数量',number: ''},
                {id:1,name:'合作伙伴数量',number: ''},
                {id:2,name:'企业数量',number: ''},
                {id:3,name:'企业经销商数量',number: ''},
                {id:4,name:'企业门店老板数量',number: ''},
                {id:5,name:'企业门店店员数量',number: ''},
                {id:6,name:'普通门店老板数量',number: ''},
                {id:7,name:'普通门店店员数量',number: ''},
                // {name:'分销用户数量',number: 100},
                {id:8,name:'普通用户数量',number:''},
                {id:9,name:'平台总人数',number:''},
            ],
            option:{
                tooltip: {},
                title: {
                    text: '用户数量'
                },
                legend: {
                    data: ['人数']
                },
                grid:{left:'15%',right:'5%',vontainLabel:true},
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ["合伙人数量", "合作伙伴数量", "企业数量", "企业经销商数量", "企业门店老板数量", "企业门店店员数量","普通门店老板数量","普通门店店员数量","普通用户数量","平台总人数"]
                },
                series: [{
                    name: '人数',
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    },
                    data: [0,0,0,0,0,0,0,0,0,0]
                }]
            },
            option2:{}
        };
    },
    computed: {},
    watch: {},
    methods: {
        // 合伙人以及合作伙伴数量
        async requestpartner(){
            let that = this,data;
            for(var i=0;i<2;i++){
                data= {current:1,size:10}
                i===0? data.level = 0 : delete data.level;
                let updata = JSON.stringify(data);
                console.log(updata)
                await axios({
                    method: 'post',
                    url: '/api/partner/list',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=> {
                    // console.log(resp)
                    if(i===0){
                        that.roledata[i].number = String(resp.data.code);
                        that.option.series[0].data[i] = resp.data.code;
                    }else{
                        that.roledata[i].number = String(resp.data.code - that.roledata[0].number);
                        that.option.series[0].data[i] = resp.data.code - that.roledata[0].number;
                    }
                }).catch( err=> {console.log(err)})
                // this.drawLine();
            }
        },

        // 剩余的角色数量请求
        async requestdata(){
            let that = this,url;
            for(var i=2;i<9;i++){
                let updata = JSON.stringify({current:1,size:10});
                switch(i){
                    case 2:url="/api/enterprise/list" ;
                    break;
                    case 3:url="/api/generalStoresBoss/list" ;
                    break;
                    case 4:url="/api/dealer/list" ;
                    break;
                    case 5:url="/api/storesBoss/list" ;
                    break;
                    case 6:url="/api/generalClerk/list" ;
                    break;
                    case 7:url="/api/storeClerk/list" ;
                    break;
                    case 8:url="/api/user/list";
                    break;
                    default: break;
                }
                await axios({
                    method: 'post',
                    url: url,
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=> {
                    // console.log(resp)
                    that.roledata[i].number = String(resp.data.code);
                    that.option.series[0].data[i] = resp.data.code;
                }).catch( err=> {console.log(err)})
            }
            let number = 0;
            for(var o=0;o<this.option.series[0].data.length-1;o++){
                number += this.option.series[0].data[o]
            }
            this.roledata[9].number = number;
            this.option.series[0].data[9] = number;
            // this.drawLine();
            that.option2 = that.option;
        },

    },
    created() {
        let  that = this;
        // that.token
        this.$nextTick(function() {
            // this.getEchart();
            that.requestpartner()
            that.requestdata()
        });
    },
    mounted() {
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
.dhzn_rolestat{
    width: 100%;
}
.dhzn_rtd-num{
    width: 23%;
    height: 130px;
    line-height: 130px;
    margin: 0 1% 20px 1%;
    padding-left: 5px;
    background-color: #1BCAFF;
    box-sizing: border-box;
    font-size: 14px;
}
.dhzn_r-t-data{
    height: 450px;
}



.dhzn_rtd-num:hover {
    transform: all 10.8s ease;
    box-shadow: 0 0 3px #868686;
    font-size: 16px;
}

.v-enter,
.v-leave-to {
    opacity: 0;
    width: 15%;
    height: 100px;
    transform: scale(1.5);
    transform: translateY(80px);
}


.v-enter-active span,
.v-leave-active span {
    transition: all 1s ease;
}

.v-move span {
    transition: all 1s ease;
}

.v-leave-active {
    position: absolute;
}

/* 数据图表 */
.view-content{
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px #414141;
}
/* .dhzn_rtd-num+.dhzn_rtd-num{
    margin-left: 2%;
} */
/* #chart1{
    width: 300px;
    height: 300px;
} */
</style>